<template>
  <header>
    <div class="bread">
      <el-button
        icon="el-icon-menu"
        size="mini"
        @click="changeCollapse"
      ></el-button>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="current-bread-color">
        <el-breadcrumb-item v-for="item in tabsList" :key="item.path" :to="{path:item.path}">{{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <img src="../assets/cx.jpg" width="25px" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
let flag
import { mapMutations, mapState} from "vuex";
export default {
  methods: {
    ...mapMutations("infoCollapse", ["changeCollapse"]),
    logOut(){
      this.$store.commit('user/clearToken')
      this.$store.commit('tabs/clearMenu')
      this.$router.push('/login')
    }

  },
  computed: {
    ...mapState("tabs", ["tabsList"])
  },
  mounted() {
    flag = document.querySelector('.current-bread-color').lastChild.firstChild
    document.querySelector('.current-bread-color').firstChild.firstChild.style.color = '#fff'
  },
  updated() {
    flag.style.color = ''
    flag = document.querySelector('.current-bread-color').lastChild.firstChild
    flag.style.color = '#fff'
  }
};
</script>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
header .bread{
  display: flex;
  align-items: center;
}
header .bread .el-breadcrumb{
  margin-left: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #606266;
  font-weight: normal;
}

</style>